<template>
  <div
    ref="threeBox"
    v-loading="loadModel"
    class="flex column module-inner"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-spinner="el-icon-loading"
    element-loading-text="模型渲染中"
  >
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      {{ baseLocation }}基地分布
    </div>
    <div ref="world" class="china-chart content common-module-bg"/>
  </div>
</template>

<script>
import threeUtils from "@/utils/threeMoudle";

const three = new threeUtils()
export default {
  name: 'ForeignBase',
  components: {},
  props: {
    moduleData: {
      default: () => [],
      type: Array
    },
    geoUrl: {
      type: String,
      default: '/three/world.json'
    },
    baseLocation: {
      type: String,
      default: '国内'
    }
  },
  data() {
    return {
      loadModel: false,
      charts: null
    }
  },
  watch: {
    'moduleData.length'(newVal) {
      if (newVal) {
        three.pointHandler(this.moduleData,'world')
      }
    }
  },
  beforeDestroy() {
    three.destroy()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.charts = {
        resize: three.onWindowResize.bind(three)
      }
      three.init(this.$refs.world, "/map/world",'world')
      // three.pointHandler(this.moduleData,'world')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.content {
  flex: 230;
  position: relative;
  overflow: hidden;
}
</style>
